<template>
  <!-- Header 组件 -->
  <Header></Header>
  <!-- 面包屑导航 -->
  <Crumb>登录页</Crumb>
  <!-- 主要内容 -->
  <div class="w-35 bg-gray py-3 px-1 mt-1 box-center " id="registrationForm">
    <div class="w-80 my-3 box-center" id="username">
      <el-input v-model="data.username" placeholder="请输入用户名" size="large" :prefix-icon="User"></el-input>
    </div>
    <div class="w-80 my-3 box-center" id="password">
      <el-input v-model="data.password" placeholder="请输入密码" size="large" :prefix-icon="Lock" type="password"
        show-password></el-input>
    </div>
    <div class="btn">
      <el-button type="danger" class="btn-login" @click="regiest">注册</el-button>
    </div>
    <div class="right mr-10">
      <router-link to="/forget/password">忘记密码</router-link>
      <router-link to="/forget/account">忘记账户名</router-link>
      <router-link to="/regiest">免费注册</router-link>
    </div>
  </div>
  <!-- 尾部组件 -->
  <Footer></Footer>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance, defineComponent } from 'vue'
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import Crumb from "@/components/Crumb.vue"
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
const { proxy } = getCurrentInstance()  //获取当前实例的代理对象proxy
const router = useRouter()

const data = reactive({
  users: [],
  username: "",
  password: ""
})
function regiest() {
  prompt(data.username, data.password)

}

</script>

<style scoped>
.btn {
  margin: 5% 10%;
}

.btn-login {
  width: 100%;
  font-weight: bold;
  font-size: 1.2rem;
  height: 2%;
}

a {
  display: inline-block;
  padding-right: 2%;
  font-size: 0.9rem;
}
</style>
